<template>
  <component class='list-group vb-list-group' :is="action ? 'div' : 'ul'"
    :class="{'list-group-flush': flush}">
    <slot name='noData' v-if='data.length === 0'></slot>
    <component v-for="(item,i) in data"  :key='i'
      :is="action ? 'a' : 'li'" 
      :href="action ? 'javascript:void(0)' : ''" 
      class="list-group-item d-flex flex-row align-items-center" 
      @click="clickItem($event,item)"
      :class="[
        {
          'list-group-item-action': action,
          'active': item.active,
          'disabled': item.disabled
        },
        item.theme ? `list-group-item-${item.theme}` : ''
      ]">
      <div class='pe-3' v-if='item.checked !== undefined'>
        <input class="form-check-input" type="checkbox" :id="`listgroup-${id}-checkbox-${i}`" v-model="item.checked">
      </div>
      <div class='flex-fill'>
        <h5 class='vb-list-group-title mb-1' v-if="item.title">{{item.title}}</h5>
        <p class='vb-list-group-content' :class="[item.bottomTip ? 'mb-1' : 'mb-0']">{{item.content}}</p>
        <small class='text-muted' v-if='item.bottomTip'>{{item.bottomTip}}</small>
      </div>
      <div v-if="item.tip">
        <small class='text-muted'>{{item.tip}}</small>
      </div>
      <div v-if="item.badge !== undefined">
        <span class="badge rounded-pill ms-2" 
          :class="[item.badgeTheme ? `bg-${item.badgeTheme}` : 'bg-primary']">
          {{item.badge}}
        </span>
      </div>
      <div class="form-check form-switch fs-4" v-if='item.switchStatus !== undefined'>
        <input class="form-check-input" type="checkbox" v-model="item.switchStatus">
      </div>
      <div class='ps-2' v-if="item.handler && !item.hideArrow">
        <i class="bi bi-chevron-right fs-4"></i>
      </div>
    </component>
  </component>
</template>
<script lang='ts'>
import { defineComponent, PropType } from 'vue';
import { ListgroupItem } from './listgroup.type';
import { DomUtil } from '../../utils';
let ListgroupId = 0;
export default defineComponent({
  name: 'VbListgroup',
  emits: ['clickItem'],
  props: {
    data: {type: Array as PropType<ListgroupItem[]>,default(){return [];}},
    action: {type: Boolean,default: false},
    flush: {type: Boolean,default: false},
    checkByTitle: {type: Boolean,default: false},
    checkByContent: {type: Boolean,default: false}
  },
  setup(props: any,ctx){
    function clickItem(e: Event,item: ListgroupItem){
      if(props.action){
        ctx.emit('clickItem',item);
      }
      if(item.handler){
        item.handler(item);
      }
      const target = e.target as HTMLElement;
      if(item.checked !== undefined){
        const arr = [];
        if(props.checkByTitle){
          arr.push('vb-list-group-title');
        }
        if(props.checkByContent){
          arr.push('vb-list-group-content');
        }
        if(arr.length > 0){
          const result = DomUtil.findTargetParent(target,arr.join(","));
          if(result){
            item.checked = !item.checked;
          }
        }
      }
    }
    ListgroupId++;
    return {
      clickItem,
      id: ListgroupId
    };
  }
});
</script>
<style>

</style>